<template>
<!--今日能耗量-->
    <div class="statistics_energy_consumption">
        <CommonTitleComponent text="今日能耗量">
            <div class="tabswitch">
                <div v-for="(item,index) in state.tablist1" :key="index" :class="state.isactive===index?'isactive':''" @click="state.isactive=index">
                    {{item.name}}
                </div>
            </div>
        </CommonTitleComponent>
        <div class="energyConsumption">
            <!-- 用电量 -->
            <div class="">
                <p class="electricBdoy">265<span>(kwh)</span></p>
                <p class="">用电量</p>
            </div>
            <!-- 用水量 -->
            <div class="">
                <p class="waterBdoy">72<span>(t)</span></p>
                <p class="">用水量</p>
            </div>
            <!-- 用气量 -->
            <div class="">
                <p class="gasBdoy">132<span>(m³)</span></p>
                <p class="">用气量</p>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {reactive} from "vue";

const state = reactive({
    tablist1: [
        {name: '日'},
        {name: '周'},
        {name: '月'}
    ],
    isactive:0
})
</script>

<style scoped lang="scss">
.statistics_energy_consumption{
    padding-top: 10px;
    height: 100%;

    .tabswitch {
        display: flex;
        justify-content: space-between;
        align-items: center;
        >div{
            width: 40px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            background: rgba(27, 147, 251, .2);
            border-radius: 10px;
            font-size: 12px;
            color: #FFFFFF;
            margin-right: 8px;
            cursor: pointer;
            &:last-child{
                margin-right: 0;
            }
        }
        .isactive{
            background: #447AB8;
        }
    }
    .energyConsumption {
        height: 84%;
        padding-top: 10px;
        display: flex;
        justify-content: space-between;
        text-align: center;
        align-items: center;
        > div {
            height: 110px;
            width: calc((100% - 30px) / 3);
            background: url('@img/energy.png') no-repeat;
            background-size: 100% 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-right: 15px;
            &:last-child{
                margin-right: 0;
            }
        }
        p {
            letter-spacing: 1px;
            &:nth-of-type(1) {
                font-size: 16px;
                font-family: PangMenZhengDao;
                color: #ffffff;
                span{
                    font-size: 10px;
                    font-family: Source Han Sans CN;
                }
            }
            &:nth-of-type(2) {
                font-size: 12px;
                color: #ffffff;
            }
        }
        .electricBdoy {
            background: linear-gradient(0deg, #FFAC1F 0%, #EAFF39 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        .waterBdoy {
            background: linear-gradient(0deg, #30f6ff 0%, #00beff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .gasBdoy {
            background: linear-gradient(0deg, #f4ff21 0%, #00ff5b 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }
}
</style>